<template>
    <a-card :bordered="false" class="gannt">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
<!--          <a-row :gutter="12">-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-item label="">-->
<!--                <a-range-picker @change="handleTimeChange" showTime />-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-item label="产线">-->
<!--                <a-input v-model="queryParam.deviceName"></a-input>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-item label="产品">-->
<!--                <a-input v-model="queryParam.productName"></a-input>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-button @click="refresh" type="primary">查询</a-button>-->
<!--              <a-button @click="() => queryParam = {}" style="margin-left: 8px">重置</a-button>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--          <a-row :gutter="12">-->
<!--            <a-col :md="6" >-->
<!--              <a-button @click="toggleMode">{{ this.day.text }}</a-button>-->
<!--            </a-col>-->
<!--          </a-row>-->
        </a-form>

      </div>
      <div class="container">
        <gantt-table class="left-container"
                     :data='datas'
                     startTime='2022-01-01'
                     endTime='2022-03-01' ref='ganntTable'
                     @task-update="logTaskUpdate"
                     @onTaskClick='taskClick'
        >
        </gantt-table>
      </div>
    </a-card>
</template>

<script>
import moment from 'moment'
import ganttTable from '@comp/gantt/gantt'
import { linesPlan } from "@/api/plan/playday"
export default {
  name: 'gannt',
  components: {
    ganttTable
  },
  data(){
    return {
      startTime: moment().subtract(1, 'months').format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment().add(1, 'months').format("YYYY-MM-DD HH:mm:ss"),
      datas: [],
      visible: false,
      task: {},
      loading: false,
      day: {
        text: '切换到天模式预览',
        enable: false
      },
    }
  },
  methods: {
    init(){
      this.loading = true
      linesPlan({
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
          res.data.forEach(item => {
            const it = {
              id: item.planCode,
              text: item.productName || item.linesName,
              isParent: item.isParent === 'Y',
              start_date: moment(item.planStartDate).format('YYYY-MM-DD HH:mm'),
              end_date: moment(item.planEndDate).format('YYYY-MM-DD HH:mm'),
              success_count: item.successCount,
              product_count: item.productCount,
              productCode: item.productCode,
              parent: item.parent,
              readonly: item.readOnly === 'Y',
              progress: 0
            }
            this.datas.push(it)
            this.$nextTick(() => {
              this.$refs.ganntTable.getGantt()
            })
          })
      }).catch(err => {
        this.$message.error(err.msg)
      }).finally(()=> {
        this.loading = false
      })
    },
    logTaskUpdate(id,action,data){
        console.log(id,action,data,"id,action,data-logTaskUpdate")
    },
    taskClick(task){
      console.log(task)
      this.visible = true
      this.task = Object.assign({},this.task,task)
    },
    toggleMode () {
      this.day.enable = !this.day.enable
      if (this.day.enable) {
        this.day.text = '切换到小时模式预览'
        this.gantt.config.scale_unit = 'day'
        this.gantt.config.date_scale = '%F,%d'
        this.gantt.render()
      } else {
        this.day.text = '切换到天模式预览'
        this.gantt.config.scale_unit = 'hour'
        this.gantt.config.date_scale = '%d日%H时'
        this.gantt.render()
      }
    },
  },
  // created() {
  //
  // },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
.container {
  height: 80vh;
  width: 100%;
}
.left-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}
</style>